<%--
  @desc: 应用列表首页
  @author: chenw
  @create: 2014-4-29 下午 15:32
--%>
<%@ page contentType="text/html;charset=utf-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<style type="text/css">
    body {
        margin: 0;
        font-size: 12px;
        font-family: serif, sans-serif;
    }

    .sel {
        background-color: #2C74B0;
    }

    .msg_main {
        margin: 3px 5px;
        border-radius: 2px;
        border: 1px solid #bbb;
        background-color: #FBFBFB;
        padding: 3px 20px 10px 20px;
    }

    .c_node {
        margin-top: 10px;
    }

    .c_title {
        font-size: 14px;
        height: 25px;
        line-height: 25px;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
    }

    .c_box_wrap {
        border: 1px solid #ccc;
        border-radius: 4px;
        padding-right: 4px;
        overflow: hidden;
    }

    .c_box {
        width: 100%;
        height: 100%;
        padding-right: 2px;
        border: none;
        text-indent: 5px;
    }

    .c_box_extra {
        width: 40%;
        height: 40%;
        padding-right: 2px;
        margin-top: 5px;
        margin-bottom: 5px;
        border: none;
        text-indent: 5px;
    }

    .remain {
        text-align: right;
        padding-right: 8px;
        margin-top: -20px;
        color: #ccc;
    }

    .fl {
        float: left;
        display: block;
    }

    .rdo_wrap {
        /*margin-top:6px;*/
        /*margin: 6px 0;*/
        height: 25px;
        line-height: 25px;
        white-space: nowrap;
        overflow: hidden;
    }

    .rdo {
        padding: 3px 20px;
        border-radius: 2px;
        background-color: #eee;
        cursor: pointer;
        border: 1px solid #2C74B0;
        margin-right: 5px;
    }

    .sel {
        background-color: #2C74B0;
        border-color: #2C74B0;
        color: #FFF;
    }

    .extra_wrap {
        margin-left: 10px;
        margin-bottom: 3px;
    }

    .extra_wrap div {
        font-size: 10pt;
    }

    .extra_wrap input[type="text"] {
        color: #000000;
    }

    input[type='text'] {
        width: 500px;
        border: 1px solid #ccc;
        border-radius: 3px;
        text-indent: 5px;
        font-size: 12px;
        color: #999;
        cursor: pointer;
    }

    .textInput, input.focus, textarea.focus {
        border: none;
    }

    .hide {
        display: none;
    }
</style>
<div class="pageContent" style="padding-top: 1px;">
<div class="msg_main">
<div class="c_node">
<div class="c_title">消息类型</div>
<div id="type_chk" class="rdo_wrap">
    <%--<span name="contentType" val="-3" class="rdo sel">新闻通知</span> <span name="contentType" val="-2" class="rdo">升级信息</span> --%><span
        name="contentType" val="-1"
        class="rdo sel">系统通知</span> <span name="contentType" val="1" class="rdo">办件过程</span> <span name="contentType"
                                                                                                   val="2" class="rdo">公示公告</span>
</div>
<div class="c_node">
    <div class="c_title">标题</div>
    <div class="c_box_wrap"><textarea name="title" id="title" rows="2" cols="6" class="c_box"></textarea></div>
    <div class="remain"><span id="sp_t_input">0</span>/<span id="sp_t_remain">20</span></div>
</div>
<div class="c_node">
    <div class="c_title">文本内容</div>
    <div class="c_box_wrap"><textarea name="content" id="content" rows="5" cols="6" class="c_box"></textarea></div>
    <div class="remain"><span id="sp_c_input">0</span>/<span id="sp_c_remain">20</span></div>
    <%--        <div class="c_node">
                <div class="c_title">扩展消息</div>
                <div class="c_box_wrap"><textarea name="extra" id="extmsg" rows="5" cols="6" class="c_box"></textarea></div>
                <div class="remain"><span id="sp_e_input">0</span>/<span id="sp_e_remain">20</span></div>
            </div>--%>
    <div class="c_node" style="display: none;">
        <div class="c_title" id="result_console">扩展消息</div>
        <div class="c_box_wrap">
            <div id="extra_menu" style="margin-top: 10px;margin-bottom: 10px;margin-left:8px"></div>
            <div id="extra_input"></div>
        </div>
    </div>
    <div class="c_node">
        <div class="c_title">推送对象</div>
        <div id="type_push" class="rdo_wrap">
            <span name="messageType" class="rdo sel" val="1">广播</span> <span name="messageType" class="rdo" val="2">群组</span> <span name="messageType" class="rdo" val="3">单发</span>
        </div>
    </div>
    <div id="tgt_group" class="c_node hide">
        <div class="c_title">群组</div>
        <div id="group_sel" class="rdo_wrap">
            <span name="messageGroup" val="unreg" class="rdo">未注册用户</span> <span name="messageGroup" val="reg"
                class="rdo sel">注册用户</span> <%--<span name="messageGroup" val="auth" class="rdo">实名认证用户</span>--%>
        </div>
    </div>
    <div id="tgt_single" class="c_node hide">
        <div class="c_title">手机号</div>
        <div class="rdo_wrap">
            <input type="text" name="alias" value="请选择发送用户"/>
        </div>
    </div>
    <div class="c_node">
    <div class="c_title">推送平台</div>
    <div  id="type_chk" class="rdo_wrap">
    <span name="platform" val="0" class="rdo sel">Android</span>
    <span name="platform" val="1" class="rdo ">IOS</span>
    <span name="platform" val="2" class="rdo ">ALL</span>
	</div>
    </div>
    
    <div class="c_node"><input id="send" type="button" value="提交"/></div>
</div>
<script type="text/javascript" src="<c:url value='/resource/js/json2.js'/>"></script>
<script type="text/javascript">
    $(function () {
        var _c_max = 200, _c_old = 0, _c_new = 0, _c_input = $("#sp_c_input"), _c_remain = $("#sp_c_remain"),
                _e_max = 20, _e_old = 0, _e_new = 0, _e_input = $("#sp_t_input"), _e_remain = $("#sp_t_remain");
        //hxz
        var extraLabel = initExtraLabel();
        $(document).bind("contextmenu", function () {
            return false;
        });
        $(document).bind("selectstart", function () {
            return  false;
        });
        $("#content").keyup(function (event) {
            var _new_val = $(this).val().trim();
            _c_new = _new_val.length;
            $(this).val(_new_val);
            if (_c_old != _c_new) {
                _c_old = _c_new;
                if (_c_new >= _c_max) {
                    _c_input.text(_c_max);
                    _c_remain.text(0);
                    $(this).val(_new_val.substr(0, _c_max));
                } else {
                    _c_input.text(_c_old);
                    _c_remain.text(_c_max - _c_old);
                }
            }
        });
        $("#title").keyup(function (event) {
            var _new_val = $(this).val().trim();
            _e_new = _new_val.length;
            $(this).val(_new_val);
            if (_e_old != _e_new) {
                _e_old = _e_new;
                if (_e_new >= _e_max) {
                    _e_input.text(_e_max);
                    _e_remain.text(0);
                    $(this).val(_new_val.substr(0, _e_max));
                } else {
                    _e_input.text(_e_old);
                    _e_remain.text(_e_max - _e_old);
                }
            }
        });
        //消息类型
        $("#type_chk span").click(function () {
            $(this).siblings().removeClass("sel");
            $(this).addClass("sel");
            var flag = $(this).attr("val");
            initExtraMenu(flag, extraLabel.get(flag));
        });
        //推送对象选择
        $("#type_push span").click(function () {
            $(this).siblings().removeClass("sel");
            $(this).addClass("sel");
            if (2 == $(this).attr("val")) {
                $("#tgt_single").hide();
                $("#tgt_group").show();
            } else if (3 == $(this).attr("val")) {
                $("#tgt_group").hide();
                $("#tgt_single").show();
            } else {
                $("#tgt_group,#tgt_single").hide();
            }
        });
        //群组选择
        $("#group_sel span").click(function () {
            $(this).siblings().removeClass("sel");
            $(this).addClass("sel");
        });
        $("#send").click(function () {
            var messageType = $("span.rdo.sel[name='messageType']").attr("val");
            var messageGroup = $("span.rdo.sel[name='messageGroup']").attr("val");
            var contentType = $("span.rdo.sel[name='contentType']").attr("val");
            var platform = $("span.rdo.sel[name='platform']").attr("val");
            var contentStr = $("textarea[name='content']").val();
            var _title = $("#title").val().trim();
            //var extra = $("textarea[name='extra']").val();
            var extra = genExtraJson();
            if (extra == "{}") {
                extra = "";
            }
            var alias = "pap_"+$("input[name='alias']").val();
            $.ajax({
                type: "POST",
                url: "<c:url value='/message/send'/>",
                data: {messageType: messageType,platform:platform, messageGroup: messageGroup, alias: alias, title: _title, contentStr: contentStr, contentType: contentType, extra: extra},
                dataType: "json",
                success: function (data) {
                    alertMsg.info(data.msg);
                }
            });
        });
        initExtraMenu(-3, extraLabel.get(-3));
    });
    //hxz
    function initExtraMenu(flag, menu) {
        $("#extra_menu").empty();
        $("#extra_input").empty();
        var keyArray = menu.keys();
        for (var i in keyArray) {
            $("#extra_menu").append('<span name="extraType" val="' + keyArray[i] + '" class="rdo">' + menu.get(keyArray[i]) + '</span>');
        }
        $("#extra_menu span").click(function () {
            if ($(this).attr("class") == "rdo") {
                $("#extra_input").append("<div class='extra_wrap'><div>" + $(this).text() + "&nbsp" + ":" + "&nbsp" + "</div><input name='" + $(this).attr("val") + "' type='text' class='c_box_extra'></div>");
                $(this).addClass("sel");
            } else {
                var cu = $(this).attr("val");
                $(":input[name=" + cu + "]").parent().remove();
                $(this).removeClass("sel");
            }
        });
    }
    //hxz
    function genExtraJson() {
        var divs = $("#extra_input").children();
        var obj = {};
        for (var i = 0; i < divs.length; i++) {
            var input = $(divs[i]).children("input");
            obj[input.attr("name")] = input.val();
        }
        return(JSON.stringify(obj));
    }
    //hxz
    function initExtraLabel() {
        var label = new Map();
        var map1 = new Map() , map2 = new Map() , map3 = new Map() , map4 = new Map() , map5 = new Map();
        //1 新闻通知 -3
        map1.put("title", "标题");
        map1.put("extra", "附加信息");
        map1.put("url", "地址");
        //2 升级 -3
        map2.put("title", "标题");
        map2.put("extra", "附加信息");
        map2.put("url", "地址");
        map2.put("verCode", "版本号");
        map2.put("verName", "版本信息");
        map2.put("releaseTime", "发布时间");
        //3系统通知 -1
        map3.put("title", "标题");
        map3.put("url", "地址");
        //4 办件 1
        map4.put("title", "标题");
        map4.put("extra", "附加信息");
        map4.put("url", "地址");
        map4.put("caseProgress", "办件状态");
        //5 公示公告 2
        map5.put("title", "标题");
        map5.put("extra", "附加信息");
        map5.put("url", "地址");
        //
        label.put(-3, map1);
        label.put(-2, map2);
        label.put(-1, map3);
        label.put(1, map4);
        label.put(2, map5);
        return label;
    }
</script>
</div>
</div>
</div>